---
type: tutorial
unitTitle: Astro UIコンポーネントの作成と設計
title: 'ユニット3の導入 - コンポーネント'
description: |-
  「初めてのAstroブログ」チュートリアル -
  ウェブサイト全体で共通する要素のコードを再利用するために、Astroコンポーネントを作成する
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


`.astro`ファイルと`.md`ファイルによりウェブサイトのページ全体を生成できるようになったので、AstroコンポーネントでHTMLの小さな部品を作成して再利用しましょう！

## 概要

このユニットでは、ウェブサイト全体で共通する要素のコードを再利用するために、**Astroコンポーネント**を作成する方法を学びます。

作成するものは以下となります。
- ページへのリンクのメニューを表示するナビゲーションコンポーネント
- 各ページの下部に表示されるフッターコンポーネント
- フッターで使用される、プロフィールページへとリンクするソーシャルメディアコンポーネント
- モバイルデバイスでナビゲーションを切り替えるためのインタラクティブなハンバーガーコンポーネント

その過程で、CSSとJavaScriptを使用して、画面サイズやユーザーの入力に反応するレスポンシブデザインを実現します。


<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] Astroコンポーネントを作成する準備ができた！
</Checklist>
</Box>
